<template>
  <div class="search-box">
    <div class="search-box--left">
      <i class="icon-search iconfont">&#xe604;</i>
      <input
        ref="query"
        v-model="query"
        @change="handleInputChange($event)"
        @keyup.enter="handleInputChange($event)"
        class="search-input"
        placeholder="搜索歌曲、歌手"
      />
      <i @click="clear" v-show="query" class="icon-clear iconfont">&#xe603;</i>
    </div>
    <div class="search-box--right" @click="handleCancel">
      取消
    </div>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data () {
    return {
      query: ''
    }
  },
  methods: {
    clear () {
      this.$emit('query', '')
    },
    setQuery (query) {
      this.query = query
    },
    blur () {
      this.$refs.query.blur()
    },
    handleCancel () {
      this.setQuery('')
      history.back()
      this.$emit('query', '')
    },
    handleInputChange (e) {
      console.log(e)
      this.$emit('query', e.target.value)
    }
  }
}
</script>

<style lang="less" scoped>
@import '~assets/style/variable';
@import '~assets/style/mixin';
.search-box {
  display: flex;
  align-items: center;
  background: var(--theme-bg-color);
  width: 100%;
  &--left {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 6px;
    height: 50px;
    position: relative;
    .icon-search,
    .icon-clear {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .icon-search {
      font-size: 24px;
      color: var(--text-color);
      left: 15px;
    }
    .icon-clear {
      color: var(--text-color);
      right: 15px;
    }
    input {
      border: none;
      outline: none;
    }
    .search-input {
      flex: 1;
      margin: 0 5px;
      height: 35px;
      line-height: 35px;
      background-color: var(--bg-color);
      color: var(--text-color);
      font-size: @fs-medium;
      border-radius: 4px;
      padding: 0 25px 0 27px;
      border: 1px solid var(--theme-color);
      caret-color: green;
      &::placeholder {
        color: var(--text-color)
      }
    }
  }
  &--right {
    flex-basis: 45px;
    font-size: @fs-medium;
    color: var(--text-color);
  }
}
</style>
